﻿<!doctype html>
<html>
    <head>
    <title>SpreadJS - Sheet Level Binding</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var _lines = ["Computers", "Washers", "Stoves"];
        var _colors = ["Red", "Green", "Blue", "White"];
        var _ratings = ["Terrible", "Bad", "Average", "Good", "Great", "Epic"];

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 2 });
            initSpread(spread);
        });
        function Product(id, line, color, name, price, cost, weight, discontinued, rating) {
            this.id = id;
            this.line = line;
            this.color = color;
            this.name = name;
            this.price = price;
            this.cost = cost;
            this.weight = weight;
            this.discontinued = discontinued;
            this.rating = rating;
        }

        function getProducts(count) {
            var dataList = [];
            for (var i = 1; i <= count; i++) {
                var line = _lines[parseInt(Math.random() * 3)];
                dataList[i - 1] = new Product(i,
                        line,
                        _colors[parseInt(Math.random() * 4)],
                        line + " " + line.charAt(0) + i,
                        parseInt(Math.random() * 5001) / 10.0 + 500,
                        parseInt(Math.random() * 6001) / 10.0,
                        parseInt(Math.random() * 10001) / 100.0,
                        !!(Math.random() > 0.5),
                        _ratings[parseInt(Math.random() * 6)]);
            }
            return dataList;
        }

        function initSpread(spread) {
            spread.isPaintSuspended(true);
            spread.setTabStripRatio(0.8);

            var products = getProducts(100);

            var sheet = spread.getSheet(0);
            sheet.setName("Default binding");
            sheet.setDataSource(products);

            var sheet2 = spread.getSheet(1);
            sheet2.setName("Custom binding");
            sheet2.autoGenerateColumns = false;
            sheet2.setDataSource(products);
            var colInfos = [
                { name: "id", displayName: "ID" },
                { name: "name", displayName: "Name", size: 100 },
                { name: "line", displayName: "Line", size: 80 },
                { name: "color", displayName: "Color" },
                { name: "price", displayName: "Price", formatter: "0.00", size: 80 },
                { name: "cost", displayName: "Cost", formatter: "0.00", size: 80 },
                { name: "weight", displayName: "Weight", formatter: "0.00", size: 80 },
                { name: "discontinued", displayName: "Discontinued", cellType: new GcSpread.Sheets.CheckBoxCellType(), size: 100 },
                { name: "rating", displayName: "Rating" }
            ];
            sheet2.bindColumns(colInfos);

            spread.isPaintSuspended(false);
        };
        /*code_end*/
    </script>

    </head>
    <body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:420px;border: 1px solid gray;"></div>
    </div>
    </body>
</html>
